<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="${pageContext.request.contextPath}/goods/query">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login">
                <div class="login">
                    <c:if test="${user.uName == null}">
                        <a href="${pageContext.request.contextPath}/login.jsp">登录</a>
                    </c:if>
                    <c:if test="${user.uName != null}">
                        欢迎光临：${user.uName}&nbsp;&nbsp;&nbsp;
                        <a href="${pageContext.request.contextPath}/users/del">注销</a>
                    </c:if>
                </div>
            </div>
            <div class="sp-cart"><a href="shopcart.jsp">购物车</a><span>${shopCartList.size()}</span></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        base: 'res/static/js/util' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery', 'form'], function () {
        var $ = layui.$, form = layui.form;
        var name = '${user.uName}';
        /*if (name != '') {
            $('.sn-quick-menu .login').html("<a href='#'>${user.uName}</a>")
        }*/
    })
</script>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="#" title="母婴商城">
                    <img src="${pageContext.request.contextPath}/res/static/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入需要的商品">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base datails-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="commodity.html" class="active">所有商品</a>
                    <a href="buytoday.html">今日团购</a>
                    <a href="information.html">母婴资讯</a>
                    <a href="about.html">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="data-cont-wrap w1200">
        <div class="crumb">
            <a href="javascript:;">首页</a>
            <span>></span>
            <a href="javascript:;">所有商品</a>
            <span>></span>
            <a href="javascript:;">产品详情</a>
        </div>
        <div class="product-intro layui-clear">
            <div class="preview-wrap">
                <a href="javascript:;"><img src="${pageContext.request.contextPath}/${goods.gImg}" width="400px"
                                            height="400px"></a>
            </div>
            <div class="itemInfo-wrap">
                <div class="itemInfo">
                    <div class="title">
                        <h4>男女宝宝秋冬装套装0一1岁婴儿衣服潮加厚连体衣保暖冬季外出抱衣 </h4>
                        <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
                    </div>
                    <div class="summary">
                        <p class="reference"><span>参考价</span>
                            <del>￥${goods.gPrice}</del>
                        </p>
                        <p class="activity"><span>活动价</span><strong class="price"><i>￥</i>${goods.gPrice*0.9}</strong>
                        </p>
                    </div>
                    <div class="choose-attrs">
                        <div class="color layui-clear"><span class="title">颜&nbsp;&nbsp;&nbsp;&nbsp;色</span>
                            <div class="color-cont"><span class="btn">${goods.gColour}</span></div>
                        </div>
                        <div class="color layui-clear"><span class="title">库&nbsp;&nbsp;&nbsp;&nbsp;存</span>
                            <div class="color-cont"><span class="btn">${goods.num}</span></div>
                        </div>
                        <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span>
                            <div class="number-cont"><span class="cut btn" id="jian" >-</span>
                                <input type="text" value="1" id="gNum">
                                <span class="add btn" id="jia">+</span></div>
                        </div>
                    </div>
                    <div class="choose-btns">
                        <button class="layui-btn layui-btn-primary purchase-btn" id="buttonss">立刻购买</button>
                        <button class="layui-btn toCart layui-btn-danger car-btn"><i
                                class="layui-icon layui-icon-cart-simple"></i>加入购物车</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(function () {
                let gid = '${goods.gid}';//商品id
                console.log(gid);
                let gimg = '${goods.gImg}';//商品图片
                console.log(gimg);
                let gname = '${goods.gName}';//商品名称
                console.log(gname);
                let gcolour = '${goods.gColour}';// 商品颜色
                let gprice = parseInt('${goods.gPrice*0.9}');//商品单价
                console.log(gprice);

                let kucun = '${goods.num}';//商品库存
                // 立即购买
                $('.toCart').click(function () {
                    let gnum = parseInt($('#gNum').val());//商品数量
                    console.log(gnum);
                    let gtotal = gprice * gnum;// 总价
                    console.log(gtotal);
                    window.location.href = '${pageContext.request.contextPath}' + "/shopcart/addOrUpdate?gid=" + gid + "&gimg=" + gimg + "&gname=" + gname+ "&gcolour=" + gcolour + "&gprice=" + gprice + "&gnum=" + gnum + "&gtotal=" + gtotal+"&kucun="+kucun;
                })
                // 加入购物车
                $('#buttonss').click(function () {
                    let gnum = parseInt($('#gNum').val());//商品数量
                    console.log(gnum);
                    let gtotal = gprice * gnum;// 总价
                    console.log(gtotal);
                    window.location.href = '${pageContext.request.contextPath}' +
                        "/order/addOrder?gid=" + gid + "&gimg=" + gimg + "&gname=" + gname
                        + "&gprice=" + gprice + "&gnum=" + gnum + "&gtotal=" + gtotal+"&kucun="+kucun;
                })

            })




        </script>


        <div class="layui-clear">
            <div class="aside">
                <h4>热销推荐</h4>
                <div class="item-list">
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="${pageContext.request.contextPath}/res/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                </div>
            </div>
            <div class="detail">
                <h4>详情</h4>
                <div class="item">
                    <img src="${pageContext.request.contextPath}/res/static/img/details_imgbig.jpg">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        base: 'res/static/js/util' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery', 'form'], function () {
        var $ = layui.$, form = layui.form;
        $('.number-cont #jian').click(function () {
            var num = parseInt($('.number-cont input').val());
            if (num > 1) {
                num--;
            }
            $('.number-cont input').val(num)
        })
        $('.number-cont #jia').click(function () {
            var num = parseInt($('.number-cont input').val());// 购买数量
            num++;
            if (num >= '${goods.num}'){
                $('#gNum').val('${goods.num}');
            }else {
                $('.number-cont input').val(num)
            }
            if(num > '${goods.num}'){
                layer.msg("库存不足！！！！！")
            }
        })
    })


</script>


</body>
</html>